<!--  -->
<template>
  <div class='app'>
    <el-dialog width="720px"
               :visible="dialogVisible"
               :append-to-body="true"
               :show-close="false"
               title="考勤查询">
      <el-table :data="dataList"
                border
                stripe
                size="small"
                v-loading="dataListLoading"
                style="width: 100%;">
        <el-table-column prop="id"
                         header-align="center"
                         align="center"
                         label="#"
                         width="60">
        </el-table-column>
        <el-table-column prop="memberName"
                         header-align="center"
                         align="center"
                         label="姓名">
        </el-table-column>
        <el-table-column prop="cardNumber"
                         header-align="center"
                         align="center"
                         label="会员卡号">
        </el-table-column>
        <el-table-column prop="cardTypeName"
                         header-align="center"
                         align="center"
                         label="卡类型">
        </el-table-column>
        <el-table-column prop="punchTime"
                         header-align="center"
                         align="center"
                         label="打卡时间">
          <template slot-scope="scope">
            {{scope.row.punchTime | formatDate('yyyy-MM-dd hh:mm:ss')}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="currentChangeHandle"
                     :current-page="pageIndex"
                     :page-sizes="[10, 20, 50, 100]"
                     :page-size="pageSize"
                     :total="totalPage"
                     background
                     layout="total, prev, pager, next"
                     style="text-align: right; margin-top: 10px">
      </el-pagination>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="$emit('cancel')">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { formatDate } from '@/utils/date'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    cardNumber: {
      type: String,
      default: ''
    }
  },
  data () {
    // 这里存放数据
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false
    }
  },
  filters: {
    formatDate (time, format = 'yyyy-MM-dd') {
      var date = new Date(time * 1000)
      return formatDate(date, format)
    }
  },
  watch: {
    dialogVisible: {
      immediate: true,
      handler: 'getAttenListHandle'
    }
  },
  // 方法集合
  methods: {
    async getAttenListHandle () {
      console.log(this.cardNumber)
      if (!this.cardNumber) {
        return !1
      }
      // 组装查询请求参数
      const params = {
        'cardNumber': this.cardNumber,
        'page': this.pageIndex,
        'limit': this.pageSize
      }
      const { data: data } = await this.$http.get(`/member/attendance/list`, { params: params })
      if (data.code === 0) {
        this.dataList = data.page.list
        this.totalPage = data.page.totalCount
      } else {
        this.dataList = []
        this.totalPage = 0
      }
      this.dataListLoading = false
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getAttenListHandle()
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  }
}
</script>
<style scoped>
</style>
